<!-- 数字键盘 -->
<template>
	<view>
		<view class="keypad-box" v-if="isShow" @touchmove.stop.prevent="">
			<view class="exit-line" @tap="hide()">﹀</view>
			<view class="keys" @tap="clickThis(1)">1</view>
			<view class="keys" @tap="clickThis(2)">2</view>
			<view class="keys" @tap="clickThis(3)">3</view>
			<view class="keys" @tap="clickThis(4)">4</view>
			<view class="keys" @tap="clickThis(5)">5</view>
			<view class="keys" @tap="clickThis(6)">6</view>
			<view class="keys" @tap="clickThis(7)">7</view>
			<view class="keys" @tap="clickThis(8)">8</view>
			<view class="keys" @tap="clickThis(9)">9</view>

			<view class="keys" v-if="isPoint" @tap="clickThis(-1)">.</view>
			<view class="keys" v-if="isX" @tap="clickThis('X')">X</view>
			<view class="keys" v-if="!isPoint && !isX"></view>

			<view class="keys" @tap="clickThis(0)">0</view>
			<view class="keys" @tap="clickThis(-2)">←</view>
		</view>
	</view>
</template>

<script>
/**
 *  @description 数字/身份证号键盘
 * @property {Boolean, String} 		isPoint		是否显示小数点;默认值：false
 * @property {Boolean, String} 		isX			是否显示X（用于输入身份证号）;默认值：false
 * @property {Number, String} 		maxLength	字符串最大长度;默认值：-1（不做长度限制）
 * @event {Function} clickFunction  			按键返回值
 * @event {Function} returnStr  				返回输入的字符串
 * @example <keypad ref="keypad" 	@clickFunction="feedIn($event)" :isPoint="false"></keypad>
 * */

export default {
	name: 'keypad',
	props: {
		isPoint: {
			type: [Boolean, String],
			default: false
		},
		isX: {
			type: [Boolean, String],
			default: false
		},
		maxLength: {
			type: [Number, String],
			default: -1
		}
	},
	data() {
		return {
			isShow: false,
			str: '' //字符创数组
		};
	},
	methods: {
		show() {
			this.isShow = true;
		},
		hide() {
			this.isShow = false;
		},
		clickThis(value) {
			this.$emit('clickFunction', value);
			this.feedIn(value);
		},
		feedIn(e) {
			if (e == -2) {
				if (this.str.length > 0) {
					this.str = this.str.substring(0, this.str.length - 1);
				}
			} else {
				if (this.maxLength == -1) {
					this.str += e;
				}
				if (this.str.length <= this.maxLength) {
					this.str += e;
				}
			}
			this.$emit('returnStr', this.str);
		}
	}
};
</script>

<style lang="scss">
.keypad-box {
	width: 750rpx;
	height: auto;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	position: fixed;
	bottom: 0rpx;
	z-index: 9999;
	background-color: #ffffff;
	.exit-line {
		height: 40rpx;
		width: 750rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.keys {
		width: 250rpx;
		height: 112rpx;
		background-color: #ffffff;
		border: 0.5rpx solid #ededed;
		color: #000000;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: background-color 0.1s;
	}
	.keys:active {
		background-color: #eeeeee;
	}
}
</style>
